import React, { memo, FC, ReactNode, useRef, MutableRefObject, DragEvent, useState } from 'react';
import useEditStore from '../../store/commonStore';
import tit from '../../assets/tit.png';
import style from '@/style/center/index.module.less';

import ImgSider from './ImgSider';
import OnDrops from './ts/index'
interface IProps {
  children?: ReactNode
}
const App: FC<IProps> = memo(() => {
  const view = useEditStore(state => state.view);
  const addcopm = useEditStore(state => state.addcopm);
  const moveView = useEditStore(state => state.moveView);
  const viewCan: MutableRefObject<any> = useRef(null)
  // 设置拖拽位置
  const usonDro = (e: DragEvent<HTMLElement>) => {
    const compInfo = OnDrops(e, viewCan)
    if ('index' in compInfo) {
      moveView(compInfo)
    } else {
      addcopm(compInfo)
    }
  }
  return (
    <div className={style.center_con} onDrop={usonDro} onDragOver={function (e) { e.preventDefault() }}>
      {/* 顶部状态栏 */}
      <img src={tit} alt="" />
      {/* 选中组件以后的边框 */}
      <div style={view.style} ref={viewCan}>
        {
          view.comps.map((item, index) => {
            return <ImgSider info={item} key={item.key} index={index}></ImgSider>
          })
        }
      </div>
    </div>
  );
});

export default App;


